<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例7</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .content {
            width: 500px;
            height: 150px;
            background: url(./img/bg.jpg);
            color: #fff;
            align-items: center;
            padding: 14% 7%;
        }
        
        .content input {
            width: 30px;
            text-align: center;
        }
        
        .btn {
            border: 0;
            background: url(./img/btn-1.png);
            width: 281px;
            height: 48px;
            cursor: pointer;
        }
        
        .active {
            background: url(./img/btn-1.png) 0 -53px;
        }
    </style>
</head>

<body>
    <div class="content flex col">
        <div>
            <input type="number" id="minute">分钟
            <input type="number" id="sec">秒
        </div>
        <div>
            <button class="btn"></button>
        </div>
    </div>

    <script>
        let fz = document.querySelector("#minute")
        let mz = document.querySelector("#sec")
        let btn = document.querySelector(".btn")
        let isStart = false
        var timer
        btn.onclick = function() {

            fz.value = fz.value == undefined || fz.value == '' ? 0 : fz.value
            if (!isStart) {
                isStart = true

                timer = setInterval(() => {
                    if (mz.value > 0) {
                        btn.className += ' active'
                        mz.value = Number(mz.value) - 1
                    } else {

                        if (fz.value > 0) {
                            fz.value = Number(fz) - 1
                            mz.value = 60
                        } else {
                            btn.className = 'btn'
                            clearInterval(s)
                            isStart = false
                        }
                    }
                }, 1000);
            } else {
                window.clearInterval(timer)
                btn.className = 'btn'
                isStart = false
            }
        }
    </script>
</body>

</html>